<template>
  <div v-if="items && Array.isArray(items) && items.length > 0">
    <a-carousel class="carousel" :autoplay="false" :after-change="onAfterChange">
      <div v-for="(item, index) in items" :key="index">
        <a-video v-if="item.indexOf('.mp4') !== -1" class="cover" :ref="'video' + index" :src="item" :controls="true" :autoplay="true" :poster="poster" />
        <a-image v-else class="cover" :src="item" />
      </div>
    </a-carousel>
  </div>
</template>

<script>
export default {
  name: "SEProductCarousel",
  components: {},
  props: {
    poster: {
      type: String,
      require: true,
      default: undefined,
    },

    items: {
      type: Array,
      require: true,
      default: () => {
        return undefined;
      },
    },
  },
  data() {
    return {};
  },
  mounted() {},
  methods: {
    onAfterChange(index) {
      if (this.items) {
        const items = this.items;
        const item = items[index];
        var i = 0;
        if (item.indexOf(".mp4") !== -1) {
          for (i = 0; i < items.length; i++)
            if (this.$refs && this.$refs["video" + i]) {
              const video = this.$refs["video" + i][0];
              video.play();
            }
        } else {
          for (i = 0; i < items.length; i++)
            if (this.$refs && this.$refs["video" + i]) {
              const video = this.$refs["video" + i][0];
              video.pause();
            }
        }
      }
    },
  },
};
</script>

<style scoped lang="less">
.cover {
  height: 100vw;
}
</style>
